JavaScript Checkbox

somethinghere :

You could simplify this a lot and make it more... Concise and less dependent on which checkbox you have. We will do this with an external script and no onClick attributes on our HTML. This will enable us to separate our logic code from our design code. I will also use a placeholder instead of value, as it will create issues when people need to start entering a value (aka, you need to only have the text there when theres no value etc...) It just makes it more complicated.\n\nSince we are dealing with numbers ('stuks' or amounts), lets also only allow number values to be inserted. Lastly, I have not bothered to replicate your HTML as I think the simplified example will make it easier to understand. Update I have also added the required and disabled sattributes here, settings your input to required when the checkbox is checked and disabled when not.\n\nCheck the below snippet for comments on the steps taken to do this:\n\n\r\n\r\n// First, let select all fieldsets like this:\r\n\r\nvar fieldsets = document.querySelectorAll( 'fieldset.checkbox-message' );\r\n\r\n// Lets loop through them\r\n\r\nfor( let i = 0; i < fieldsets.length; i++ ){\r\n \r\n // Lets create variables to store our fieldset, checkbox and input for later use.\r\n \r\n let fieldset = fieldsets[ i ];\r\n let checkbox = fieldset.querySelector( 'input[type=\"checkbox\"]' );\r\n let input = fieldset.querySelector( 'input[type=\"number\"]' );\r\n \r\n // Lets also store the message we put in placeholder\r\n // We will also give it a default value,\r\n // in case you forget to set the placeholder.\r\n \r\n let message = input.placeholder || 'Please fill in the amount';\r\n \r\n // Now lets define a function that will fill the placeholder\r\n // based on the checked value of the checkbox\r\n // We will be storing it in a variable because of the scope of a `for` block.\r\n // If you would use function setState() it might be defined globally\r\n // So multiply checkboxes would not work.\r\n \r\n let setState = function(){\r\n \r\n if( checkbox.checked ){\r\n \r\n input.placeholder = message;\r\n input.disabled = false;\r\n input.required = true;\r\n \r\n } else {\r\n \r\n input.placeholder = '';\r\n input.disabled = true;\r\n input.required = false;\r\n \r\n }\r\n \r\n }\r\n \r\n // Now lets listen for changes to the checkbox and call our setState\r\n \r\n checkbox.addEventListener( 'change', setState );\r\n \r\n // Lrts also call setState once to initialise the correct placeholder\r\n // for our input element to get started. This will remove any placeholders\r\n // if the checkboxes are unchecked.\r\n \r\n setState();\r\n \r\n}\r\n<fieldset class=\"checkbox-message\">\r\n <label for=\"bangkirai\">Bangkirai</label>\r\n <input type=\"checkbox\" id=\"bangkirai\" />\r\n <input type=\"number\" placeholder=\"Tell us, how many 'bangkirai'?\" />\r\n <span>stuks</span>\r\n</fieldset>\r\n\r\n<fieldset class=\"checkbox-message\">\r\n <label for=\"beukenhout\">Beukenhout</label>\r\n <input type=\"checkbox\" id=\"beukenhout\" />\r\n <input type=\"number\" placeholder=\"How many 'beukenhout'?\" />\r\n <span>stuks</span>\r\n</fieldset>",

2018-04-24T09:22:38